import React, { Component } from 'react';
import { connect } from 'dva';
import { Select, Card, Button } from 'antd';
import styles from './MoreVideos.less';

const Option = Select.Option;
const { Meta } = Card;

@connect(({ headlines }) => ({
  videos: headlines.videos,
}))
class MoreVideos extends Component {
  state = {
    type: '23281',
    page: 1,
  };

  updateVideoList() {
    const { dispatch } = this.props;
    console.log('Goal0');
    dispatch({
      type: 'headlines/queryVideos',
      payload: {
        type: this.state.type,
        page_size: 8,
        page_num: this.state.page,
      },
    });
  }

  componentDidMount() {
    this.setState({ loading: false });
    this.updateVideoList();
  }

  render() {
    let that = this;
    let { videos } = this.props;

    let generateNewsList = () => {
      let res = [];
      if (videos && videos.data_list) {
        for (let i = 0; i < videos.data_list.length; i++) {
          res.push(
            <div className={styles.VideoCard} key={'videolist-' + i}>
              <Card hoverable cover={<img src={videos.data_list[i].image_url} />}>
                <Meta
                  description={
                    <a
                      href={videos.data_list[i].original_url}
                      className={styles.ellipsis}
                      target="_blank"
                    >
                      {videos.data_list[i].title}
                    </a>
                  }
                />
              </Card>
            </div>
          );
        }
      }
      return res;
    };

    let handleTypeChange = value => {
      that.setState({ type: value, page: 1 }, () => {
        this.updateVideoList();
      });
    };

    let handlePageChange = value => {
      that.setState({ page: this.state.page + value }, () => {
        this.updateVideoList();
      });
    };

    return (
      <div className={styles.outerWidthLim}>
        <div className={styles.outerHeightLim}>
          <div className={styles.contentCard}>
            <div className={styles.cardHeader}>
              <div className={styles.cardHeaderTitle}>独家头条</div>
              <div className={styles.TypeSelecter}>
                <span>选择类型：</span>
                <Select defaultValue="23281" onChange={handleTypeChange}>
                  <Option value="23281">一周热榜</Option>
                  <Option value="232861">证监会发布</Option>
                  <Option value="23287">政策解读</Option>
                  <Option value="232862">银行发布会</Option>
                  <Option value="21643">走进私募</Option>
                  <Option value="23284">大咖讲坛</Option>
                </Select>
              </div>
            </div>
            <div className={styles.cardContent}>
              <div style={{ height: '538px' }}>{generateNewsList()}</div>
              <div className={styles.pager}>
                <Button
                  onClick={() => {
                    handlePageChange(-1);
                  }}
                  className={styles.smallMarginRight}
                  disabled={this.state.page <= 1}
                >
                  上一页
                </Button>
                <Button
                  onClick={() => {
                    handlePageChange(1);
                  }}
                  className={styles.smallMarginLeft}
                  disabled={this.state.page * 8 >= videos.total_count}
                >
                  下一页
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default MoreVideos;
